<template>
  <div class="app-container">
    <div class="customContainer ">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <dj-store-select :category="572" :defaultStore="formInline.store_id" :needItem="true" @change="selectStoreChanged" />
        <el-form-item>
          <el-date-picker v-model="pickerDate" value-format="yyyy-MM" type="month" format="yyyy-MM" placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <dj-simple-table :columns="tableColumns" :data="listData" :global="global" :loading="listLoading" />
    </div>
  </div>
</template>
<script>
import { getList } from '@/api/report/store_outbound_summary_form';
import { pickerOptionsF, pickerDateDot, optionMaxTime, getDateString } from '@/utils';
import { DjSimpleTable } from '@/components/table';
import { DjStoreSelect } from '@/components/store';
export default {
  components: {
    'dj-simple-table': DjSimpleTable,
    'dj-store-select': DjStoreSelect
  },
  data() {
    return {
      global:{
        store_id:'',
        store_name:'',
        time:'',
      },
      tableColumns: [
        {
          label: '序号',
          dtcol: 'index'
        }, 
        {
          label: '礼品机出库金额',
          dtcol: 'gift_out_money',
          isnum: true,
          link: 'report/storeDay_form'
        },
        {
          label: '摊位机出库金额',
          dtcol: 'machine_out_money',
          isnum: true,
          link: 'report/booth_out_summary_form'
        },
        {
          label: '礼品兑换出库金额',
          dtcol: 'convertible_out_money',
          isnum: true,
          link: "report/gift_change_out_form"
        },
        {
          label: '员工内购出库金额',
          dtcol: 'worker_out_money',
          isnum: true,
          link:'report/staffpurchase_out_detail'
        },
        {
          label: '企划销售活动出库金额',
          dtcol: 'sale_out_money',
          isnum: true,
          link: 'report/salesplan_out_detail'
        },
        {
          label: '企划氛围活动出库金额',
          dtcol: 'love_out_money',
          isnum: true,
          link:'report/atmosphere_out_detail'
        },
        {
          label: '杂项出库金额',
          dtcol: 'other_out_money',
          isnum: true,
          link: 'report/sundryOutput_form'
        },
        {
          label: '调出到其他门店出库金额',
          dtcol: 'transfer_out_money',
          isnum: true,
          link: 'report/gift_exportStore_summary_form'
        },
        
      ],
      listData: [], // 对象数组元素中的对象含有store_id属性
      listLoading: false,
      formInline: {
        store_id: this.$store.getters.optionId,
        time: '',
        look_del: '0'
      },
      pickerDate: new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth()))
        .toISOString()
        .slice(0, 7)
        // .replace('-', '.')
        // .replace('-', '.')
        // new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
    };
  },
  watch:{
    pickerDate: function() { 
      this.global.time = this.pickerDate; 
    }
  }, 
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      vm.global.time = vm.pickerDate;
      vm.beforeComingIn();
    });
  },
  methods: {
    beforeComingIn() {
      if (this.$route.query.routerflag) {
        // console.log(this.$route.query, 'zst1119 beforeComingIn route.query');
        let col = this.$route.query.col;
        let query = this.$route.query.row; 
        this.pickerDate = query.time;
        this.formInline.store_id = query.store_id;
        // this.searchClick();
      }
      //  else {
      //   if (!this.listData || this.listData.length == 0) {
      //     this.searchClick();
      //   }
      // }
    },
    selectStoreChanged(obj,item) {
      for (let key in obj) this.formInline[key] = obj[key];
      this.global.store_id = item.id
      this.global.store_name = item.name
      this.searchClick();
    },
    // 搜索
    searchClick() {
      this.formInline.time = this.pickerDate;
      this.fetchData();
    },
    // 列表获取
    fetchData() {
      this.listLoading = true; 
      getList(this.formInline)
        .then(response => {
          // console.log(response)
          this.listData = []
          if (!response) {
            this.listData = [];
          } else {  
            if(Array.isArray(response.data)) {
              this.listData = response.data
            } else {
              this.listData = []
              this.listData.push(response.data)
            }
            
          }
          let listData = this.listData 
          if(listData.length > 0) {
            for(let key in listData) {
              listData[key].index = parseInt(key)+1
            }
          }
          this.listData = listData 
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>